<template>
  <div class="loginCont" :style="'height: '+docheight+'px'">
    <img class="loginBg" src="static/img/login_bg.png" />
    <div class="loginMask">
      <div class="loginTop">
        <div class="logoName">同城家教-教师端</div>
        <div class="loginTip">轻松兼职，时间自由，保底80%提成</div>
      </div>
      <div class="formCont">
        <div class="inputCont">
          <input type="number" v-model="userPhone" placeholder="请输入手机号" />
        </div>
        <div class="inputCont noborder">
          <input v-model="userPwd" type="password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="loginBtn" @click="loginFn">立即登录</div>
    </div>
    <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
  </div>
</template>

<script>
    import {login} from '@/http/api'
    import {Toast } from 'vux'

export default {
  components:{Toast},
  data(){
    return{
      userPhone:'',
      userPwd:'',
      showText:'',
      showToast:false,
    }
  },
  methods:{
    loginFn(){
      if(this.userPhone==''){
        this.showToast = true
        this.showText = '请输入手机号'
        return false
      }else if(this.userPwd==''){
        this.showToast = true
        this.showText = '请输入密码'
        return false
      }else if(this.userPhone.length!=11){
        this.showToast = true
        this.showText = '手机号格式不正确'
        return false
      }
      var data = {
        mobile:this.userPhone,
        password:this.userPwd,
      }
      login(data).then((res)=>{
        this.showToast = true
        if(res.data.code==1){
          // localStorage.setItem('techAdminToken',res.data.data)
          localStorage.setItem('userPhone',this.userPhone)
          this.showText = '登陆成功'
          setTimeout(()=>{
            this.$router.replace({path:'/home'})
          },1000)
        }else{
          this.showText = res.data.msg
        }
      }).catch((err)=>{
        this.showToast = true
        this.showText = '服务器请求超时'
      })
    }
  },
  created() {
    if(localStorage.getItem('userPhone')){
      this.userPhone = localStorage.getItem('userPhone')
    }
  },

}
</script>

<style scoped lang="less">
  .loginCont{
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .loginBg{
      height: 100%;
    }
    .loginMask{
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,0.3);
      height: 100%;
      box-sizing: border-box;
      padding: 30px 0;
      .loginTop{
        width: 85%;
        margin: 40px auto;
        box-sizing: border-box;
        color: #fff;
        .logoName{
          color: #fff;
          font-size: 1.5rem;
        }
        .loginTip{
          font-size: 0.7rem;
        }
      }
      .formCont{
        width: 85%;
        background-color: #fff;
        box-sizing: border-box;
        margin: 30px auto;
        border-radius: 0.25rem;
        margin-top: 100px;
        opacity: 0.9;
        overflow: hidden;
        padding: 0 20px;
        .inputCont{
          padding: 30px 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ebebeb;
          input{
            flex: 1;
            width: 20px;
            border: none;
            outline: none;
            color: #6455d4;
          }
        }
        .noborder{
          border-bottom: none;
        }
      }
      .loginBtn{
        width: 85%;
        margin: 50px auto 0;
        text-align: center;
        background-color: white;
        color: #6455d4;
        line-height: 50px;
        letter-spacing: 5px;
        opacity: 0.9;
        border-radius: 5px;
      }
    }
  }
</style>
